<template>
  <el-row v-loading="loading">
    <sea-shift-event ref="shiftEvent" :onkeyup="onkeyup"></sea-shift-event>
    <el-col :span="cols[0]" class="sea-card">
      <el-card shadow="hover" :body-style="{'min-height': '296px'}">
        <span class="text-blue">按照用户组过滤：{{ checkedNode.name }}</span>
        <el-tree :expand-on-click-node="false" :data="tree"
                 default-expand-all expand-on-click-node
                 @node-click="onNodeClick"></el-tree>
      </el-card>
    </el-col>
    <el-col :span="cols[1]" class="sea-card">
      <el-card shadow="hover">
        <el-row>
          <el-col :span="10" style="padding-left: 5px; padding-right: 5px;">
            <el-input v-model="username" @change="onTextChange" placeholder="客户名称"  clearable>
              <el-button slot="append" title="搜索" icon="el-icon-search" @click="filterData"></el-button>
            </el-input>
          </el-col>
          <el-col :span="10">
            <el-checkbox style="margin-left: 5px; margin-top: 5px" v-model="allSelect" @change="onSelectAll">全选
            </el-checkbox>
          </el-col>
        </el-row>
        <el-row>
          <div class="user-panel">
            <user-item v-for="(item, idx) in list" :key="idx" :item="item" :index="idx" :span="span"
                       :onchange="onSelect"></user-item>
          </div>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
/* eslint-disable */
import UserItem from "../select/user-item";

const demo = [{
    label: '一级 1',
    children: [{
        label: '二级 1-1',
        children: [{
            label: '三级 1-1-1'
        }]
    }]
}, {
    label: '一级 2',
    children: [{
        label: '二级 2-1',
        children: [{
            label: '三级 2-1-1'
        }]
    }, {
        label: '二级 2-2',
        children: [{
            label: '三级 2-2-1'
        }]
    }]
}, {
    label: '一级 3',
    children: [{
        label: '二级 3-1',
        children: [{
            label: '三级 3-1-1'
        }]
    }, {
        label: '二级 3-2',
        children: [{
            label: '三级 3-2-1'
        }]
    }]
}];

const users = [
    {userName: '何其祥2', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
    , {userName: '何其祥', branchName: '城西分社', display: true, checked: false}
]

/**
 * 多选
 */
export default {
    components: {UserItem}
    , name: 'UserMultipleSelect'
    , props: {
        // 每一个用户面板所占用的栈格
        span: {type: Number, default: 4},
        // 左右面板的比例
        cols: {type: Array, default: () => [6, 18]},
        // 表单组件列表，这个不是双向绑定的值
        value: {type: [String, Array], default: () => []}
    }
    , data() {
        return {
            //
            loading: false,
            // 用户分组
            tree: undefined,
            // 用户列表
            list: undefined,
            // 是否全部选中
            allSelect: false,
            // 用户搜索栏输入内容
            username: '',
            // 选中的用户分组
            checkedNode: {},
            // shift 点击事件需要记录的数据索引
            shiftClickIndex: undefined
        }
    },
    watch: {
        /**
         * 侦听值的变化，如果改变了需要操作的对象，需要刷新表单的内容
         */
        value: {
            handler: function (value) {
                this.merge(value);
            }
        }
    },
    created: function () {
        this.reload();
    }, methods: {
        /**
         * 重新载入数据
         */
        reload: function () {
            this.tree = demo;
            this.list = users;
            // this.$layers.multipleAjax([{
            //     url: '/authority/group/fully',
            //     method: 'GET',
            //     params: {}
            // }, {
            //     url: '/authority/user/fully',
            //     method: 'GET',
            //     params: {}
            // }]).then(([ret1, ret2]) => {
            //     if (ret1.code === 0 && ret2.code === 0) {
            //         let list = this.$bamboo.wrapList(ret1.data, {label: 'name'});
            //         this.tree = this.$bamboo.toTree(list);
            //
            //         list = ret2.data;
            //         list.forEach(e => {
            //             e.display = true;
            //             e.checked = false;
            //         })
            //         this.list = list;
            //
            //         this.merge();
            //     }
            // });
        },
        /**
         * 比对值，选中节点
         */
        merge: function () {
            let checkedList = this.value;
            let checked = this.$layers.isArray(checkedList) ? checkedList : checkedList.split(',');
            this.list.forEach(user => user.checked = this.$layers.contain(checked, user.no));
        },
        /**
         * 格式化用户列表，转换为 Vue 可直接使用的对象
         *
         * @param checked 已经选中的用户id数组
         * @param user 用户
         */
        wrapUser: function (checked, user) {
            // 确定是否选中
            user.checked = this.$layers.contain(checked, user.no);
            user.display = true;
            user.hidden = function () {
                user.display = false;
            };
            user.show = function () {
                user.display = true;
            };
        },
        /**
         * 节点点击事件
         *
         * @param node
         */
        onNodeClick(node) {
            this.checkedNode = node.data;
            this.filterData();
        },
        /**
         * 输入框变化时间
         */
        onTextChange: function (val) {
            this.username = val || '';
            this.filterData();
        },
        /**
         * 按照检索条件过滤数据
         */
        filterData: function () {
            this.list.forEach(user => user.display = this.isHit(user));
        },
        /**
         * 是否命中过滤条件
         * @param item
         * @return {boolean} 是否满足过滤条件
         */
        isHit: function (item) {
            let path = this.checkedNode.path;
            if (path !== undefined) {
                let hit;
                if (item.groupId === path) {
                    hit = true;
                } else {
                    hit = this.$layers.contain(path, item.groupId);
                }
                // 未命中网点过滤选项
                if (!hit) {
                    return false;
                }
            }
            let username = this.username;
            if (this.$layers.isNotEmpty(username)) {
                return this.$layers.contain(item.username, username);
            } else {
                return true;
            }
        },
        /**
         * 全选
         * @val 选中的值
         */
        onSelectAll: function () {
            for (let i = 0; i < this.list.length; i++) {
                this.list[i].checked = this.allSelect;
            }
        },
        /**
         * 验证当前是否选中全部，选中的话，将勾选框勾上
         */
        checkSelectAll: function () {
            for (let i = 0; i < this.list.length; i++) {
                if (!this.list[i].checked) {
                    this.allSelect = false;
                    return;
                }
            }
            this.allSelect = true;
        },
        /**
         * 单选，触发全选
         * @val 选中的值
         */
        onSelect: function (item, idx) {
            // shift 按键复选操作
            if (this.$refs.shiftEvent.isPressing()) {
                this.onMultiSelect(idx);
            } else {
                // 单选操作
                item.checked = !item.checked;
                let val = item.checked;
                if (!val) {
                    this.allSelect = false;
                } else {
                    this.checkSelectAll();
                }
            }
        },
        /**
         * 按住 shift 多选
         * @val 选中的值
         */
        onMultiSelect: function (idx) {
            if (this.shiftClickIndex !== undefined) {
                // shift 多选情况下，先后点下的坐标
                let a = this.shiftClickIndex, b = idx;
                if (a > b) {
                    b = a;
                    a = idx;
                }
                for (let i = 0; i <= this.list.length; i++) {
                    if (i >= a && i <= b) {
                        if (this.list[i].display) {
                            this.list[i].checked = true;
                        }
                    }
                }
                this.checkSelectAll();
            } else {
                this.shiftClickIndex = idx;
            }
        },
        /**
         * shift 按键松掉的事件，清除记录的值
         */
        onkeyup: function () {
            this.shiftClickIndex = undefined;
        },
        /**
         * 获取选中的用户 id 数组
         *
         * @field 字段
         * @return {Array} 用户数组
         */
        getSelectFields: function (field) {
            let ret = [];
            for (let i = 0; i < this.list.length; i++) {
                let ele = this.list[i];
                if (ele.checked) {
                    ret.push(ele[field]);
                }
            }
            return ret;
        },
        /**
         * 获取选中的用户
         * @return {Array} 用户数组
         */
        getSelectUser: function () {
            let ret = [];
            for (let i = 0; i < this.list.length; i++) {
                let ele = this.list[i];
                if (ele.checked) {
                    ret.push(ele);
                }
            }
            return ret;
        }
    }
}
</script>

<style scoped>
.user-panel {
    max-height: 472px;
    overflow: auto;
}
</style>

